<template>
  <div class="container">
    <!-- 欠费用户 -->
    <!-- 查询条件 -->
    <el-form :inline="true" class="tableSearchBox hasPrint" size="medium">
      <el-form-item label="类别：">
        <el-select v-model="search.type" placeholder="请选择类别">
          <el-option v-for="(item,index) in typeList" :key="index" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="search.type==1">
        <el-input class="form_input" v-model="search.meterID" placeholder="请输入用户编号" clearable
          @keyup.enter.native="getSearchData"></el-input>
      </el-form-item>
      <el-form-item v-if="search.type==2">
        <el-input class="form_input" v-model="search.name" placeholder="请输入用户姓名" clearable
          @keyup.enter.native="getSearchData"></el-input>
      </el-form-item>
      <el-form-item v-if="search.type==3">
        <el-select v-model="search.villageID" filterable :filter-method="villageFilter" clearable
          placeholder="请输入或选择查询小区" @focus="villageFocus">
          <el-option v-for="item in villageList" :key="item.villageID" :label="item.villageName"
            :value="item.villageID"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="search.type==4">
        <el-date-picker v-model="search.period" type="month" format="yyyy-MM" value-format="yyyy-MM" placeholder="选择账期"
          :editable="false"></el-date-picker>
      </el-form-item>
      <el-form-item v-if="search.type==5">
        <el-select v-model="search.readerName" clearable placeholder="请选择抄表员">
          <el-option v-for="(item,index) in meterReaderList" :key="index" :label="item.name" :value="item.name">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getSearchData">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- /查询条件 -->
    <PagesTable ref="child" :tableMaxHeight="tableHeight" :tableExportPrinting="true" :tableID="tableId"
      :isTableTitle="false" :tableTitle="tableTitle" :border="tableBorder" :isIndex="true" :tableSpan="tableSpan"
      :tableHeader="tableHeader" :tableData="tableData" :tablePagination="tablePagination" @pageSize="pageSizeChange"
      @currentPage="currentPageChange" @getTableAllData="getTableAllData" />
  </div>
</template>

<script>
  import PagesTable from "../../components/PagesTable.vue";
  export default {
    components: {
      PagesTable,
    },
    data() {
      return {
        tableHeight: "",
        search: {
          //搜索条件
          type: 1,
          meterID: "",
          name: "",
          villageID: "", //小区
          period: "",
          readerName: "",
        },
        typeList: [{
            id: 1,
            name: "用户编号"
          },
          {
            id: 2,
            name: "用户姓名"
          },
          {
            id: 3,
            name: "小区"
          },
          {
            id: 4,
            name: "账期"
          },
          {
            id: 5,
            name: "抄表员"
          },
        ],
        villageList: [{
            villageName: "新华巷",
            villageID: 28
          },
          {
            villageName: "朝阳路东",
            villageID: 29
          },
          {
            villageName: "朝阳路西",
            villageID: 32
          },
          {
            villageName: "党校后",
            villageID: 33
          },
          {
            villageName: "鸳鸯楼",
            villageID: 34
          },
          {
            villageName: "人大单元楼",
            villageID: 35
          },
          {
            villageName: "老干部单元楼",
            villageID: 36
          },
          {
            villageName: "水泉崖",
            villageID: 38
          },
          {
            villageName: "民政局宿舍",
            villageID: 40
          },
          {
            villageName: "总表（吴）",
            villageID: 41
          },
          {
            villageName: "富康家园",
            villageID: 42
          },
          {
            villageName: "教委单元楼",
            villageID: 45
          },
          {
            villageName: "德和盛嘉园",
            villageID: 95
          }
        ], //小区列表
        villageListCopy: [{
            villageName: "新华巷",
            villageID: 28
          },
          {
            villageName: "朝阳路东",
            villageID: 29
          },
          {
            villageName: "朝阳路西",
            villageID: 32
          },
          {
            villageName: "党校后",
            villageID: 33
          },
          {
            villageName: "鸳鸯楼",
            villageID: 34
          },
          {
            villageName: "人大单元楼",
            villageID: 35
          },
          {
            villageName: "老干部单元楼",
            villageID: 36
          },
          {
            villageName: "水泉崖",
            villageID: 38
          },
          {
            villageName: "民政局宿舍",
            villageID: 40
          },
          {
            villageName: "总表（吴）",
            villageID: 41
          },
          {
            villageName: "富康家园",
            villageID: 42
          },
          {
            villageName: "教委单元楼",
            villageID: 45
          },
          {
            villageName: "德和盛嘉园",
            villageID: 95
          }
        ], //小区列表原始数据
        meterReaderList: [{
            name: "白明常"
          },
          {
            name: "吴春德"
          },
          {
            name: "田建功"
          },
        ],
        tableId: "usersInArrears",
        tableTitle: "欠费用户",
        tableBorder: true,
        tableHeader: [{
            // 实际为水表编号内容
            name: "用户编号",
            mark: "meterID",
            fixed: "left",
          },
          {
            name: "用户姓名",
            mark: "name",
            fixed: "left",
          },
          {
            name: "手机号",
            mark: "phone",
            width: "105",
          },
          {
            name: "小区",
            mark: "villageName",
          },
          // {
          //   name: "详细地址",
          //   mark: "villageDetail",
          //   minWidth: "100",
          // },
          // {
          //   name: "用水类型",
          //   mark: "waterRateName",
          //   width: "85",
          // },
          // {
          //   name: "账期",
          //   mark: "period",
          // },
          // {
          //   name: "上期底数",
          //   mark: "lastReadingValue",
          // },
          // {
          //   name: "本期底数",
          //   mark: "currReadingValue",
          // },
          // {
          //   name: "抵扣水量",
          //   mark: "readingFromDepositWater",
          // },
          // {
          //   name: "用水量",
          //   mark: "currWaterCount",
          // },
          // {
          //   name: "水费",
          //   mark: "waterFee",
          // },
          // {
          //   name: "水资源税",
          //   mark: "tax",
          // },
          // {
          //   name: "污水费",
          //   mark: "effluentFee",
          // },
          // {
          //   name: "滞纳金",
          //   mark: "lateFee",
          // },
          {
            name: "起始账期",
            mark: "minPeriod",
          },
          {
            name: "最后账期",
            mark: "maxPeriod",
          },
          {
            name: "总水费",
            mark: "totalFee",
          },
          {
            name: "账单条数",
            mark: "total",
          },
          // {
          //   name: "总减免",
          //   mark: "totalWaiver",
          // },
          {
            name: "抄表员",
            mark: "readerName",
          },
        ],
        tablePagination: {
          show: true,
          current: 1,
          size: 10,
          total: 0,
        },
        tableSpan: {
          mark: "userID",
          colsIndex: [0, 2, 3, 4, 5],
        },
        tableData: [],
        searchAllParam: {}
      };
    },
    mounted() {
      const self = this;
      // self.getMeterReaderList();
      // self.getVillageList();
      self.getSearchData();
    },
    beforeDestroy() {},
    created() {
      var self = this;
      var height = $(document).height() - 172 - 67 - 50;
      self.tableHeight = height + "";
    },
    methods: {
      getMeterReaderList() {
        //抄表员列表
        const self = this;
        var param = {
          rid: 3,
        };
        self.$axios.post("/service/bsSysuserInfoGet", param).then((res) => {
          if (res.data.status === "success") {
            self.meterReaderList = res.data.res;
          } else {
            self.$message.error(res.data.res);
          }
        });
      },
      getVillageList() {
        //小区列表
        const self = this;
        var param = {
          types: "village",
        };
        self.$axios.post("/service/bsSelectListGet", param).then((res) => {
          if (res.data.status === "success") {
            var tmp = res.data.res;
            //小区
            self.villageList = tmp.village;
            //保留数据源
            self.villageListCopy = Object.assign(self.villageList);
          } else {
            self.$message.error(res.data.res);
          }
        });
      },
      //小区搜索
      villageFilter(txt) {
        //对绑定数据赋值
        this.villageList = this.villageListCopy.filter((item) => {
          if (
            item.villageName.indexOf(txt) !== -1 ||
            item.sx.indexOf(txt) !== -1 ||
            item.qp.indexOf(txt) !== -1
          ) {
            return true;
          }
        });
      },
      //小区列表还原（当 input 获得焦点时触发）
      villageFocus() {
        this.villageList = this.villageListCopy;
      },
      getSearchData() {
        const self = this;
        self.tableData = [];
        self.tablePagination.total = 0;
        self.tablePagination.current = 1;
        self.tablePagination.size = 10;
        self.handleTableData();
      },
      handleTableData() {
        const self = this;
        if (self.search.type == 1) {
          //通过用户编号查询(实际为水表编号查询)
          if (self.search.meterID) {
            self.tableTitle = "欠费用户（用户编号：" + self.search.meterID + "）";
          } else {
            self.tableTitle = "欠费用户";
          }
          var param = {
            pageNum: self.tablePagination.current,
            pageSize: self.tablePagination.size,
            meterID: self.search.meterID
          };
          self.getOwedUserList(param);
        } else if (self.search.type == 2) {
          //通过用户姓名查询
          if (self.search.name) {
            self.tableTitle = "欠费用户（用户姓名：" + self.search.name + "）";
          } else {
            self.tableTitle = "欠费用户";
          }
          var param = {
            pageNum: self.tablePagination.current,
            pageSize: self.tablePagination.size,
            name: self.search.name
          };
          self.getOwedUserList(param);
        } else if (self.search.type == 3) {
          //通过小区查询
          if (self.search.villageID) {
            let villageCurrent = self.villageListCopy.find(
              (currentValue) => currentValue.villageID === self.search.villageID
            );
            self.tableTitle =
              "欠费用户（小区：" + villageCurrent.villageName + "）";
          } else {
            self.tableTitle = "欠费用户";
          }
          var param = {
            pageNum: self.tablePagination.current,
            pageSize: self.tablePagination.size,
            villageID: self.search.villageID
          };
          self.getOwedUserList(param);
        } else if (self.search.type == 4) {
          //通过账期查询
          if (self.search.period) {
            self.tableTitle = "欠费用户（账期：" + self.search.period + "）";
          } else {
            self.tableTitle = "欠费用户";
          }
          var param = {
            pageNum: self.tablePagination.current,
            pageSize: self.tablePagination.size,
            period: self.search.period
          };
          self.getOwedUserList(param);
        } else if (self.search.type == 5) {
          //通过抄表员查询
          if (self.search.readerName) {
            self.tableTitle =
              "欠费用户（抄表员：" + self.search.readerName + "）";
          } else {
            self.tableTitle = "欠费用户";
          }
          var param = {
            pageNum: self.tablePagination.current,
            pageSize: self.tablePagination.size,
            readerName: self.search.readerName
          };
          self.getOwedUserList(param);
        }
      },
      getOwedUserList(param) {
        const self = this;
        self.searchAllParam = param
        // self.$axios.post("/service/bsOwedUserGet", param).then((res) => {
        //   if (res.data.status === "success") {
        self.tableData = [{
            "readerName": "\u7530\u5efa\u529f",
            "meterID": 13548,
            "name": "\u5c71\u897f\u7984\u7eac\u5821\u592a\u94a2\u8010\u706b\u6750\u6599\u6709\u9650\u516c\u53f8",
            "villageName": "\u5355\u4f4d",
            "phone": "13834117559",
            "userID": 13548,
            "maxPeriod": "202109",
            "minPeriod": "202109",
            "total": 1,
            "totalFee": 247634.8
          },
          {
            "readerName": "\u7530\u5efa\u529f",
            "meterID": 1590,
            "name": "\u9633\u66f2\u53bf\u7b2c\u4e8c\u4e2d\u5b66\u6821",
            "villageName": "\u5355\u4f4d",
            "phone": "13834538061,13834538061",
            "userID": 10684,
            "maxPeriod": "202109",
            "minPeriod": "202011",
            "total": 8,
            "totalFee": 118469.0
          },
          {
            "readerName": "\u7530\u5efa\u529f",
            "meterID": 12798,
            "name": "\u534e\u5f3a\u65b9\u7279\uff08\u592a\u539f\uff09\u65c5\u6e38\u53d1\u5c55\u6709\u9650\u516c\u53f8",
            "villageName": "\u5355\u4f4d",
            "phone": "18535146191,18535146191,18535146191,18535146191,18535146191,18535146191",
            "userID": 10669,
            "maxPeriod": "202109",
            "minPeriod": "202109",
            "total": 1,
            "totalFee": 97237.9
          },
          {
            "readerName": "\u7530\u5efa\u529f",
            "meterID": 10845,
            "name": "\u592a\u539f\u5e02\u4e07\u79d1\u540c\u5fb7\u623f\u5730\u4ea7\u5f00\u53d1\u6709\u9650\u516c\u53f8",
            "villageName": "\u5355\u4f4d",
            "phone": null,
            "userID": 10845,
            "maxPeriod": "202109",
            "minPeriod": "202107",
            "total": 3,
            "totalFee": 74257.4
          },
          {
            "readerName": "\u7530\u5efa\u529f",
            "meterID": 10704,
            "name": "\u534e\u5f3a\u65b9\u7279\uff08\u592a\u539f\uff09\u65c5\u6e38\u53d1\u5c55\u6709\u9650\u516c\u53f8",
            "villageName": "\u5355\u4f4d",
            "phone": "18535146191,18535146191,18535146191,18535146191,18535146191,18535146191",
            "userID": 10669,
            "maxPeriod": "202109",
            "minPeriod": "202109",
            "total": 1,
            "totalFee": 45955.1
          },
          {
            "readerName": "\u767d\u660e\u5e38",
            "meterID": 9385,
            "name": "\u7269\u4e1a\u7eff\u5316",
            "villageName": "\u9633\u5149\u4f73\u82d1",
            "phone": "13934608906",
            "userID": 9384,
            "maxPeriod": "202006",
            "minPeriod": "201608",
            "total": 2,
            "totalFee": 30317.9
          },
          {
            "readerName": "\u7530\u5efa\u529f",
            "meterID": 11196,
            "name": "\u5c71\u897f\u7701\u5168\u6c11\u5065\u8eab\u4e2d\u5fc3",
            "villageName": "\u624b\u673a\u6284\u8868\u7530",
            "phone": "13934045261",
            "userID": 11196,
            "maxPeriod": "202109",
            "minPeriod": "202109",
            "total": 1,
            "totalFee": 26797.8
          },
          {
            "readerName": "\u7530\u5efa\u529f",
            "meterID": 1558,
            "name": "\u9633\u66f2\u53bf\u9ec4\u5be8\u9547\u5b8b\u5e84\u6751\u6751\u6c11\u59d4\u5458\u4f1a",
            "villageName": "\u5355\u4f4d",
            "phone": null,
            "userID": 1558,
            "maxPeriod": "202108",
            "minPeriod": "202010",
            "total": 2,
            "totalFee": 24777.6
          },
          {
            "readerName": "\u7530\u5efa\u529f",
            "meterID": 1593,
            "name": "\u592a\u539f\u5e02\u751f\u6001\u73af\u5883\u5c40\u9633\u66f2\u5206\u5c40",
            "villageName": "\u5355\u4f4d",
            "phone": "15386993421",
            "userID": 1593,
            "maxPeriod": "202109",
            "minPeriod": "202106",
            "total": 2,
            "totalFee": 20950.9
          },
          {
            "readerName": "\u7530\u5efa\u529f",
            "meterID": 11223,
            "name": "\u5c71\u897f\u4e07\u4e8b\u5174\u5bb6\u4ff1\u6709\u9650\u516c\u53f8",
            "villageName": "\u624b\u673a\u6284\u8868\u7530",
            "phone": "17703511288",
            "userID": 11223,
            "maxPeriod": "202109",
            "minPeriod": "202108",
            "total": 2,
            "totalFee": 16579.0
          }
        ];
        self.tablePagination.total = 10;
        self.searchAllParam.pageNum = 1
        self.searchAllParam.pageSize = self.tablePagination.total
        //   } else {
        //     self.$message.error(res.data.res);
        //   }
        // });
      },
      pageSizeChange(data) {
        this.tablePagination.size = data;
        this.handleTableData();
      },
      currentPageChange(data) {
        this.tablePagination.current = data;
        this.handleTableData();
      },
      getTableAllData(text) {
        var self = this;
        self.$axios
          .post("/service/bsOwedUserGet", self.searchAllParam)
          .then(res => {
            if (res.data.status === "success") {
              if (text == 'export') {
                self.$refs.child.exportAllToExcel(res.data.res);
              } else if (text == 'print') {
                self.$refs.child.printAllData(res.data.res);
              }
            } else {
              self.$message.error(res.data.res);
            }
          });
      }
    },
  };
</script>
<style lang="scss" scoped>
</style>